<template>
	<div class="wrapZ">
		<div class="top">
			<div class="input">
				<el-input v-model="inpWord" placeholder="请输入角色名称" @keyup.enter.native="searchUserRole"></el-input>
				<el-button icon="el-icon-search" class="userBtn backg" @click.native="searchUserRole">搜索</el-button>
			</div>
			<el-button type="primary" icon="el-icon-circle-plus-outline" class="userBtn"
				@click="addUserRole()">添加</el-button>
		</div>
		<div class="formList">
			<el-table :data="userRoleList" style="width: 100%">
				<el-table-column  label="序号">
					<template slot-scope="scope">
						0{{ scope.$index+1 }}
					</template>
				</el-table-column>
				<el-table-column prop="roleName" label="角色名称">
				</el-table-column>
				<el-table-column>
					<template slot="header">
						操作
					</template>
					<template slot-scope="scope">
						<span style="color:red" @click="deleteUserRole(scope.row)">删除</span>
					</template>
				</el-table-column>
			</el-table>
			<el-pagination 
				:total="totalSize" 
				@current-change="changePage" 
				:curent-page='pageIndex' 
				:page-size="pageSize"
				layout="prev, pager, next">
			</el-pagination>

		</div>
		<!-- 添加 -->
		<el-dialog title="请添加新的角色" :visible.sync="centerDialogVisible" center>
			<el-form :model="userRoleData" :rules="rules" ref="myForm">
				<el-form-item label="角色:" prop="roleName">
					<el-input v-model="userRoleData.roleName" autocomplete="off" placeholder="请输入新的角色名称"></el-input>
				</el-form-item>
				<el-form-item label="上级角色:" prop="roleName">
					<el-select v-model="Rolenames" placeholder="请选择">
						<el-option label="无" value=0></el-option>
						<el-option
								v-for="item in themes"
								:key="item.roleId"
								:label="item.roleName"
								:value="item.roleId">
					</el-option>
					</el-select>
				</el-form-item>
			</el-form>

			<span slot="footer" class="dialog-footer">
				<el-button class=" wid" style="background-color:#106ab1 ; color: white;" @click="addUserRoleOk('myForm')">确 定</el-button>
				<el-button class="gray wid" @click="centerDialogVisible = false">取 消</el-button>
			</span>
		</el-dialog>
		<!-- 删除 -->
		<el-dialog title="" :visible.sync="dialogTableVisible">
			<b>确认删除该角色？</b>
			<span slot="footer" class="dialog-footer">
				<el-button class="wid" style="background-color:#106ab1 ;  color: white; " @click="deleteUserRoleOk()">确 定</el-button>
				<el-button class="gray wid" @click="dialogTableVisible = false">取 消</el-button>
			</span>
		</el-dialog>
	</div>
</template>
<script>
	export default {
		data() {
			return {
				Rolenames:"",
				themes:[], //所有权限
				baseUrl: require("../js/baseUrl.js").baseUrl,
				pageIndex: 1,
				pageSize:6,
				totalSize:0,
				dialogTableVisible: false,
				centerDialogVisible: false,				
				userRoleList: [],		
				userRoleData: {
					roleName: '',
				},
				inpWord: "",
				searchWord: "",
				rules: {
					roleName: [{
						required: true,
						message: "角色不能为空！！",
						trigger: "blur"
					}, ],
				},
				delroleId: ""
			}
		},		
		methods: {
			//查询所有权限
			userRoleTeacher() {
				this.$http.post(this.baseUrl + "SchoolSys/role/findAll", {
					status: 1
				}).then(res => {
					if (res.data.code = 200) {
						this.themes = res.data.data
						console.log(this.themes)
					}
				})
			},
			// 查询用户权限
			userRole() {
				this.$http.post(this.baseUrl + "SchoolSys/role/find", {
					pageSize: this.pageSize + "",
					pageIndex: this.pageIndex + ""
				}).then(res => {
					//console.log(res)
					if (res.data.code = 200) {
						this.userRoleList = res.data.data.list
						this.totalSize = res.data.data.num * this.pageSize
					}
				})
			},	
			//添加用户权限
			addUserRole() {
				this.centerDialogVisible = true
			},
			addUserRoleOk(form) {
				this.$refs[form].validate((valid) => {
					if(this.Rolenames.length==0){
						this.$message.error("请填写完整信息")
					}else{
						if (valid) {
						this.$http.post(this.baseUrl + 'SchoolSys/role/add', {
							roleName: this.userRoleData.roleName,
							parentRole:this.Rolenames
						}).then(res => {
							if (res.data.code == 200) {
								this.$message.success("角色添加成功")
								this.centerDialogVisible = false
								this.userRole()
							} else {
								this.$message.error(res.data.msg)
							}
						})
					}
					}
				
				});
			},
			// 删除
			deleteUserRole(userRoleData) {
				this.dialogTableVisible = true
				this.delroleId = userRoleData.roleId
				//console.log(this.delroleId)
			},
			deleteUserRoleOk() {
				// console.log(this.delroleId)
				this.$http.post(this.baseUrl + 'SchoolSys/role/del', {
					roleId: this.delroleId
				}).then(res => {
					if (res.data.code == 200) {
						this.$message.success("角色删除成功")
						this.dialogTableVisible = false
						this.userRole()
					} else {
						this.$message.error(res.data.msg)
					}
				})
			},			
			//根据权限名查询SchoolSys/role/findByName  
			searchUserRoleManagent(){
				this.pageIndex=1
				this.$http.post(this.baseUrl + "SchoolSys/role/findByName", {
					roleName:this.searchWord+"",
					pageIndex:this.pageIndex+"",
					pageSize:this.pageSize+"",

				}).then(res => {
					// console.log(res)
					if (res.data.code == 200) {
						this.userRoleList = res.data.data.list
						this.totalSize = res.data.data.num * this.pageSize	
					}			
				})
			},
			searchUserRole() {
				this.pageIndex = 1
				this.searchWord = this.inpWord
				this.searchUserRoleManagent()
			},
			//分页
			changePage(page){
				this.pageIndex = page;
				//this.inpWord = this.searchWord
			
				if(this.inpWord!=""){
					this.userRole()
				}
			}
		},
		mounted() {
			this.userRole()
			this.userRoleTeacher()
			
		}
	}
</script>